<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D学习与渲染</title>
</head>
<body>

</body>
<script src="../three/three.min.js"></script>
<script src="../three/OrbitControls2.js"></script>
<script>
    // 创建场景
    let scene = new THREE.Scene()
    // 设计网络模型
    let box = new THREE.BoxGeometry(100,100,100)
    let ys = new THREE.MeshLambertMaterial({
        color: 0xFFFF00,
        opacity: 0.9,
        transparent: true // 是否开启透明度效果
    })// MeshBasicMaterial
    let mesh = new THREE.Mesh(box,ys)
    scene.add(mesh)

    // 创建第二个容器
    let box2 = new THREE.CylinderGeometry(50,50,50,50)
    let sx = new THREE.MeshLambertMaterial({
        color: 0x808080,
        opacity: 0.6,
        transparent: true
    })
    let mesh2 = new THREE.Mesh(box2,sx)
    // mesh2.translateZ(150) 向Z轴方向移动150
    mesh2.position.set(0,0,150)
    scene.add(mesh2)

    // 添加辅助线
    let axisHelper = new THREE.AxisHelper(250)
    scene.add(axisHelper)

    // 点光源 SpotLight
    let point = new THREE.PointLight(0xffffff)
    point.position.set(100,200,300)
    scene.add(point)

    // 环境光 0xffffff
    let hjg = new THREE.AmbientLight(0x444444)
    scene.add(hjg)

    // 创建相机
    let camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(200,150,100)
    camera.lookAt(scene.position)

    // 渲染器
    let renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth,window.innerHeight)
    renderer.setClearColor(0xb9d3ff, 1)

    document.body.appendChild(renderer.domElement)
    // renderer.render(scene, camera)

    // 自动旋转 ----------- start -----------
    // function render(){
    //     renderer.render(scene, camera)
    //     mesh.rotateX(0.01)// 环绕Y周旋转
    //     // mesh.rotateX(0.01)
    //     requestAnimationFrame(render)
    // }
    // render()
    // 自动旋转 ----------- end -----------

    // 鼠标操作 ----------- start -----------
    // function render(){
    //     renderer.render(scene, camera)
    // }
    // render()
    // let controls = new THREE.OrbitControls(camera,renderer.domElement)
    // controls.addEventListener('change', render);
    // 鼠标操作 ----------- end -----------

    // 有自动旋转，也可以鼠标拖动 ----------- start -----------
    function render(){
        renderer.render(scene, camera)
        mesh.rotateY(0.01)
        requestAnimationFrame(render)
    }
    render()
    let controls = new THREE.OrbitControls(camera)
    // 通过requestAnimationFrame(render)周期性指定render函数，妹必要再动通过监听鼠标时间执行render函数
    // 有自动旋转，也可以鼠标拖动 ----------- end -----------
</script>
</html>